<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>组件的生命周期</title>
    </head>
    <body>
        <!-- 准备好DOM容器 -->
        <div id="test"></div>

        <!-- 必须按照顺序引入JS -->
        <!-- 引入React核心库 -->
        <script src="../js/react.development.js"></script>
        <!-- 引入react-dom库，用于操作DOM -->
        <script src="../js/react-dom.development.js"></script>
        <!-- 引入babel，用于将JSX翻译为JS -->
        <script src="../js/babel.min.js"></script>

        <!-- type必须为text/babel，代表里面的内容为JSX -->
        <script type="text/babel">
            class LifeCycle extends React.Component {
                state = {
                    opacity: 1,
                };

                death = () => {
                    // 卸载组件
                    ReactDOM.unmountComponentAtNode(
                        document.getElementById("test")
                    );
                };

                /**
                 * componentDidMount在组件挂载完毕时触发，只触发一次
                 */
                componentDidMount() {
                    this.timer = setInterval(() => {
                        let { opacity } = this.state;

                        if (opacity <= 0) {
                            opacity = 1;
                        } else {
                            opacity -= 0.1;
                        }

                        // setState方法通常会导致重绘
                        this.setState({ opacity: opacity });
                    }, 200);
                }

                /**
                 * 组件即将要卸载时调用
                 */
                componentWillUnmount() {
                    clearInterval(this.timer);
                }

                /**
                 * render函数调用的时机：初始化渲染 和 状态更新之后
                 */
                render() {
                    console.log("render");

                    // 由于render函数会被调用 1 + n次（n为需要重绘的次数），所以最终会内存溢出或占满CPU
                    // setInterval(() => {
                    //     let { opacity } = this.state;

                    //     if (opacity <= 0) {
                    //         opacity = 1;
                    //     } else {
                    //         opacity -= 0.1;
                    //     }

                    //     // setState方法通常会导致重绘
                    //     this.setState({ opacity: opacity });
                    // }, 200);

                    const { opacity } = this.state;

                    return (
                        <div>
                            <h2 style={{ opacity: opacity }}>
                                React学不会怎么办？
                            </h2>
                            <button onClick={this.death}>不活了</button>
                        </div>
                    );
                }
            }

            ReactDOM.render(<LifeCycle />, document.getElementById("test"));
        </script>
    </body>
</html>
